<template>
  <live-open-layout>
    <div :class="{ '_box-wrapper': true, _mobile: isMobile }">
      <div class="_box-search">
        <div class="_search-list">
          <div class="_search-item">
            <label>Order by</label>
            <div class="_select-search-bar-wrapper">
              <el-select
                v-model="params.order_by"
                size="large"
                class="_select-search-bar"
                placeholder="Recommended"
                clearable
                @change="onQuery"
              >
                <el-option
                  v-for="item in orderBy"
                  :key="item.value"
                  v-bind="item"
                />
              </el-select>
            </div>
          </div>
          <div class="_search-item">
            <label>Price By</label>
            <div class="_select-search-bar-wrapper">
              <el-select
                v-model="params.price_by"
                size="large"
                class="_select-search-bar"
                placeholder="Recommended"
                clearable
                @change="onQuery"
              >
                <el-option
                  v-for="item in priceBy"
                  :key="item.value"
                  v-bind="item"
                />
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <component
        ref="basicTableRef"
        :is="BasicTable<API.BOX.BoxListItem>"
        :request="getBoxList"
        :field-names="{ list: 'box_list' }"
        :params="params"
      >
        <template #default="{ list, pageSize, loading }">
          <div class="_box-list">
            <box-container
              class="_box-item"
              v-for="box in list"
              :key="box.id"
              @click="onViewBoxDetail(box)"
            >
              <div
                class="flex flex-col items-center justify-between gap-1rem h-full w-full"
              >
                <div class="flex-1 h-0 w-full">
                  <img
                    class="h-full w-full"
                    style="object-fit: fill"
                    :src="box?.image"
                  />
                </div>
                <price-btn :price="Number(box?.spin_amount || 0)" />
              </div>
            </box-container>
            <template v-if="list.length === 0 && loading">
              <box-container
                class="_box-item"
                v-for="loadingItem in pageSize"
                :key="loadingItem"
              >
                <div class="flex items-center justify-center h-full w-full">
                  <loading class="!w-2.5rem" :track-width="6" />
                </div>
              </box-container>
            </template>
          </div>
        </template>
      </component>
    </div>
  </live-open-layout>
</template>

<script lang="tsx" setup>
import { getBoxList } from "@/api/box";
import type { BasicTableInstance } from "@/components/BasicTable/basicTable";
import BasicTable from "@/components/BasicTable/basicTable.vue";
import BoxContainer from "@/components/BoxContainer/box-container.vue";
import Loading from "@/components/Loading/loading.vue";
import PriceBtn from "@/components/PriceBtn/price-btn.vue";
import { orderBy, priceBy } from "@/enum/common";
import { useMedia } from "@/hooks/useMedia";
import LiveOpenLayout from "@/layout/live-open-layout/live-open-layout.vue";

const router = useRouter();
const isMobile = useMedia();

const basicTableRef = ref<BasicTableInstance>();
const params = ref<API.BOX.BoxListParams>({
  order_by: void 0,
  price_by: void 0,
  search_content: void 0,
});

function onQuery() {
  basicTableRef.value?.resetQuery();
}

function onViewBoxDetail(box: API.BOX.BoxListItem) {
  router.push(`/boxs/${box.id}`);
}
</script>

<style lang="less" scoped>
._box-wrapper {
  @apply flex flex-col w-full;
  gap: 1.94rem;
  padding: 2.63rem 0;
  ._box-search {
    @apply flex items-center justify-between;
    gap: 2.19rem;
    ._search-list {
      @apply flex items-center;
      gap: 3.7rem;
      ._search-item {
        @apply flex items-center;
        gap: 1rem;
        & > label {
          font-size: 1rem;
          line-height: 1.38rem;
          white-space: nowrap;
        }
        ._select-search-bar-wrapper {
          width: 18.75rem;
          ._select-search-bar {
            width: 100%;
          }
        }
      }
    }
  }

  ._box-list {
    @apply flex flex-wrap;
    gap: 1.13rem;
    ._box-item {
      position: relative;
      width: calc((100% - 1.13rem * 4) / 5);
      cursor: pointer;
      ._view {
        display: none;
        position: absolute;
        top: 0.88rem;
        right: 0.88rem;
        transition: opacity 0.2s;
        &:hover {
          opacity: 0.7;
        }
      }

      &:hover {
        ._view {
          display: block;
        }
      }
    }
  }

  &._mobile {
    padding: 0.94rem;
    gap: 1.25rem;
    ._box-search {
      ._search-list {
        @apply flex-col w-full;
        gap: 1.25rem;
        ._search-item {
          width: 100%;
          gap: 0.13rem;
          & > label {
            width: 5rem;
          }
          .select-search-bar-wrapper {
            @apply flex-1;
            width: 0 !important;
          }
        }
      }
    }
    ._box-list {
      gap: 0.81rem;
      ._box-item {
        width: calc((100% - 0.81rem) / 2);
      }
    }
  }
}
</style>
